<template>
  <div class="app-container">
      <el-button type="warning" @click="" style="margin-bottom:1%;margin-right:1%" @click="payAllVisible=true">发放全体员工工资</el-button>
      <el-dialog
            title="发放全体员工工资"
            :visible.sync="payAllVisible"
            width="30%"
            >
            <div style="text-align:center">
                * 发放时间：<el-date-picker v-model="payTime" type="month" placeholder="选择月" class="inputBox"></el-date-picker><br>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="payAllVisible = false">取 消</el-button>
                <el-button type="primary" @click="payAllVisible = false;
                payAll()">确认发放</el-button>
            </span>
        </el-dialog>

      <el-button type="primary" @click="" style="margin-bottom:1%" @click="rewordVisible=true">全体员工 工资奖惩</el-button>
      <el-dialog
            title="全体员工 工资奖惩"
            :visible.sync="rewordVisible"
            width="30%"
            >
            <div style="text-align:center">
                * 开始时间：<el-date-picker v-model="beginTime" type="month" placeholder="选择月" class="inputBox"></el-date-picker><br>
                * 结束时间：<el-date-picker v-model="endTime" type="month" placeholder="选择月" class="inputBox"></el-date-picker><br>
                * 奖惩数额：<el-input v-model="salaryChange" placeholder="加工资输入正数，扣工资输入负数" class="inputBox" oninput="value=value.replace(/[^\d]/g,'')" maxLength='11' ></el-input><br>
                * 奖惩说明：<el-input v-model="details" placeholder="请输入说明" class="inputBox" type="textarea" maxlength="254" show-word-limit></el-input><br>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="rewordVisible = false">取 消</el-button>
                <el-button type="primary" @click="rewordVisible = false;
                updateSalary()">确 定</el-button>
            </span>
        </el-dialog>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="工号" width="150">
        <template slot-scope="scope">
          {{ scope.row.staffNumber }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="性别" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.sex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属部门" width="150" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.department }}</span>
        </template>
      </el-table-column>
      <el-table-column label="薪资" width="150" align="center">
        <template slot-scope="scope">
            <i class="el-icon-coin" />
          <span>{{ scope.row.salary }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="600">
        <template slot-scope="scope">

        <el-button type="warning" @click="" style="margin-bottom:1%;margin-right:2%" @click="scope.row.payVisible=true">发放工资</el-button>
            <el-dialog
                title="发放员工工资"
                :visible.sync="scope.row.payVisible"
                width="30%"
                >
                <div style="text-align:center">
                    * 工 号：<el-input v-model="scope.row.staffNumber" class="inputBox" :disabled="true"></el-input><br>
                    * 姓 名：<el-input v-model="scope.row.name" class="inputBox" :disabled="true"></el-input><br>
                    * 薪 资：<el-input v-model="scope.row.salary"  class="inputBox" :disabled="true"></el-input><br>
                    * 发放时间：<el-date-picker v-model="scope.row.payOneTime" type="month" placeholder="选择月" class="inputBox"></el-date-picker><br>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="scope.row.payVisible = false">取 消</el-button>
                    <el-button type="primary" @click="scope.row.payVisible = false;
                    payOne(scope.row)">确认发放</el-button>
                </span>
            </el-dialog>

            <el-button type="primary" @click="scope.row.salaryVisible = true" style="margin-right:2%">工资奖惩</el-button>
                <el-dialog
                    title="工资奖惩"
                    :visible.sync="scope.row.salaryVisible"
                    width="30%"
                    >
                    <div style="text-align:center">
                        * 工 号：<el-input v-model="scope.row.staffNumber" class="inputBox" :disabled="true"></el-input><br>
                        * 姓 名：<el-input v-model="scope.row.name" class="inputBox" :disabled="true"></el-input><br>
                        * 薪 资：<el-input v-model="scope.row.salary"  class="inputBox" :disabled="true"></el-input><br>
                        * 开始时间：<el-date-picker v-model="scope.row.beginTime" type="month" placeholder="选择月" class="inputBox"></el-date-picker><br>
                        * 结束时间：<el-date-picker v-model="scope.row.endTime" type="month" placeholder="选择月" class="inputBox"></el-date-picker><br>
                        * 奖惩数额：<el-input v-model="scope.row.salaryChange" placeholder="加工资输入正数，扣工资输入负数" maxlength="11" class="inputBox" oninput="value=value.replace(/[^\d]/g,'')" maxLength='11' ></el-input><br>
                        * 奖惩说明：<el-input v-model="scope.row.details" placeholder="请输入说明" maxlength="254" show-word-limit class="inputBox" type="textarea"></el-input><br>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="scope.row.salaryVisible = false">取 消</el-button>
                        <el-button type="primary" @click="scope.row.salaryVisible = false;
                        updateOneSalary(scope.row)">确 定</el-button>
                    </span>
                </el-dialog>
            <el-button type="success" @click="fetchSalaryRecord(scope.row)" style="margin-right:2%">查看奖惩记录</el-button>
                <el-dialog
                    title="工资奖惩记录表"
                    :visible.sync="scope.row.recordVisible"
                    width="40%"
                    >
                    <div style="text-align:center">
                        <el-table
                            v-loading="salaryRecordLoading"
                            :data="scope.row.salaryRecord"
                            element-loading-text="Loading"
                            border
                            fit
                            highlight-current-row
                            >
                            <el-table-column align="center" label="工号" width="150">
                                <template slot-scope="scope">
                                {{ scope.row.staffNumber }}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="奖惩说明">
                                <template slot-scope="scope">
                                {{ scope.row.details }}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="奖惩数额" width="150">
                                <template slot-scope="scope">
                                {{ scope.row.salaryChange }}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="生效时间" width="150">
                                <template slot-scope="scope">
                                {{ formatTime(scope.row.effectTime,'yyyy-MM') }}
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-dialog>
                <el-button type="primary" @click="selectOneSalary(scope.row)">查看员工薪资记录</el-button>
                <el-dialog
                    title="员工薪资记录表"
                    :visible.sync="scope.row.salaryListVisible"
                    width="70%"
                    >
                    <div style="text-align:center">
                        <el-table
                            v-loading="salaryListLoading"
                            :data="scope.row.salaryList"
                            element-loading-text="Loading"
                            border
                            fit
                            highlight-current-row
                            >
                            <el-table-column align="center" label="工号" width="150">
                                <template slot-scope="scope">
                                {{ scope.row.staffNumber }}
                                </template>
                            </el-table-column>
                            <el-table-column label="姓名" width="150" align="center">
                                <template slot-scope="scope">
                                {{ scope.row.name }}
                                </template>
                            </el-table-column>
                            <el-table-column label="所属部门" width="110" align="center">
                                <template slot-scope="scope">
                                <span>{{ scope.row.department }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="具体说明" >
                                <template slot-scope="scope ">
                                    <span v-for="(item, index) in scope.row.details" :key="index">
                                        {{ item }}
                                        <br> 
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column label="发放时间" width="110" align="center">
                                <template slot-scope="scope ">
                                {{ formatTime(scope.row.payTime,"YYYY-MM") }}
                                </template>
                            </el-table-column>

                            <el-table-column align="center" prop="created_at" label="应发工资(元)" width="200">
                                <template slot-scope="scope">
                                    <i class="el-icon-coin" />
                                    <span>{{ scope.row.normalSalary }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column align="center" prop="created_at" label="实际工资(元)" width="200">
                                <template slot-scope="scope">
                                    <i class="el-icon-coin" />
                                    <span>{{ scope.row.actualSalary }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-dialog>
                
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        align="center"
        :page-size="5"
        @current-change="fetchData()"
        :current-page.sync="currentPage"
        layout="prev, pager, next"
        :total="total">
        </el-pagination>
  </div>
</template>

<script>
import { getPageList } from '@/api/table'
import { getAllSalaryList } from '@/api/table'
import { searchOneHolidayRecord } from '@/api/table'
import { changeSalary } from '@/api/table'
import { changeAllSalary } from '@/api/table'
import { paySalary } from '@/api/table'
import { payOneSalary } from '@/api/table'
import { searchOneReword } from '@/api/table'
import { getOneSalaryList } from '@/api/table'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      listLoading: true,
      salaryRecordLoading:false,
      payTime:'',
      payAllVisible:false,
      rewordVisible:false,
      salaryListLoading:false,

        // 工资奖惩所需要的数据
      details:'',
      salaryChange:'',
      beginTime:'',
      endTime:'',

      currentPage:1,
      total:1,
    
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
      formatTime(time, format) {
            return this.$moment(time).utcOffset(8).format(format)
        },
        // 查询某个员工的薪资记录表
        selectOneSalary(params){
            this.salaryListLoading=true
            this.listLoading=true
            getOneSalaryList({staffNumber:params.staffNumber})
            .then(res=>{
                params.salaryList=res.data.data
            })
            .then(()=>{
                params.salaryListVisible=true
                this.listLoading=false
            })
            .then(()=>{
                this.salaryListLoading=false
            })
            .catch(()=>{
                this.listLoading=false
            })
        },
        // 全体员工发工资
        payAll(){
            if(this.payTime==null || this.payTime==''){
                this.$message.error("发放月份不能为空！")
                return
            }
            paySalary({effectTime:this.payTime})
            .then(res=>{
                this.$message.success(res.data.data)
                this.fetchData()
            })
            .catch(err=>{
                this.$message.error("抱歉，服务器宕机了...")
            })
        },
        // 单个员工发工资
        payOne(params){
            if(params.payTime==null || params.payTime==''){
                this.$message.error("发放月份不能为空！")
                return 
            }
            this.listLoading=true
            payOneSalary({effectTime:params.payOneTime,staffNumber:params.staffNumber})
            .then(res=>{
                this.$message.success(res.data.data)
                this.fetchData()
                this.listLoading=false
            })
            .catch(err=>{
                this.$message.error("抱歉，服务器宕机了...")
            })
        },
        // 全体员工工资奖惩
        updateSalary(){
            if(this.beginTime==null || this.beginTime==''){
                this.$message.error("开始时间不能为空！")
                return 
            }
            if(this.endTime==null || this.endTime==''){
                this.$message.error("结束时间不能为空！")
                return 
            }
            if(this.salaryChange==null || this.salaryChange==''){
                this.$message.error("奖惩数额不能为空！")
                return 
            }
            if(this.details==null || this.details==''){
                this.$message.error("奖惩说明不能为空！")
                return 
            }
            if(this.beginTime>this.endTime){
                this.$message.error("奖惩失败，结束时间不可早于开始时间！")
                return 
            }
            this.listLoading=true
            changeAllSalary({
                details:this.details,
                salaryChange:this.salaryChange,
                beginTime:this.beginTime,
                endTime:this.endTime
            })
            .then(res=>{
                this.$message.success(res.data.data)
                this.fetchData()
                this.listLoading=false
            })
            .catch(err=>{
                this.$message.error("抱歉，服务器宕机了...")
            })
            this.listLoading=false
        },
        // 单人奖惩
        updateOneSalary(params){
            if(params.beginTime==null || params.beginTime==''){
                this.$message.error("开始时间不能为空！")
                return 
            }
            if(params.endTime==null || params.endTime==''){
                this.$message.error("结束时间不能为空！")
                return 
            }
            if(params.salaryChange==null || params.salaryChange==''){
                this.$message.error("奖惩数额不能为空！")
                return 
            }
            if(params.details==null || params.details==''){
                this.$message.error("奖惩说明不能为空！")
                return 
            }
            if(params.beginTime>params.endTime){
                this.$message.error("奖惩失败，结束时间不可早于开始时间！")
                return 
            }
            this.listLoading=true
            changeSalary({
                    staffNumber:params.staffNumber,
                    details:params.details,
                    salaryChange:params.salaryChange,
                    beginTime:params.beginTime,
                    endTime:params.endTime
                })
                .then(res=>{
                    this.$message.success(res.data.data)
                    this.fetchData()
                    this.listLoading=false
                })
                .catch(err=>{
                    this.$message.error("抱歉，服务器宕机了...")
                })
            this.listLoading=false
        },
        // 查看奖惩记录
      fetchSalaryRecord(params){
          this.listLoading=true
          this.salaryRecordLoading=true
          searchOneReword({staffNumber:params.staffNumber})
          .then(res=>{
              params.salaryRecord=res.data.data
          })
          .then(()=>{
              params.recordVisible=true
              this.listLoading=false
              this.salaryRecordLoading = false
          })
          .catch(()=>{
              this.listLoading=false
              this.salaryRecordLoading = false
          })
      },
    fetchData() {
        this.list=[]
      this.listLoading = true
      getPageList({currentPage:this.currentPage}).then(res => {
        let data = res.data.data.data
        this.total=res.data.data.total
        for(let i=0;i<data.length;i++){
              var l={
              staffNumber:data[i].staffNumber,
              name:data[i].name,
              sex:data[i].sex,
              department:data[i].department,
              salary:data[i].salary,

              // 薪资奖惩需要的参数
              details:'',
              salaryChange:'',
              beginTime:'',
              endTime:'',

              // 薪资记录表
              salaryRecord:null,

              // 个人工资发放时间
              payOneTime:'',

              // 每个人的薪资记录表
              salaryList:'',

              // 这里增加了两个可控制的动态属性
              salaryVisible:false,
              recordVisible:false,
              payVisible:false,
              salaryListVisible:false,
              salaryInput:'',
                }
              this.list.push(l);
          }
        this.listLoading = false
      })
    }
  }
}
</script>
<style  scoped>
.inputBox{
    width:70%;
    margin-bottom: 2%;
}
</style>